<template>
  <div class="goods-container">
    <!--左侧图片-->
    <div class="thumb">
        <div class="custom-control custom-checkbox">
          <!--复选框-->
          <input type="checkbox" class="custom-control-input" :id="'cb'+id" :checked="state" @change="stateChange"/>
          <label class="custom-control-label" :for="'cb'+id">
            <!--商品的缩放图-->
            <img :src="pic">
          </label>
        </div>
    </div>
    <!--右侧信息区域-->
    <div class="goods-info">
      <!--商品标题-->
      <h6 class="goods-title">{{title}}</h6>
      <div class="goods-info-bottom">
        <!--商品价格-->
        <span class="goods-price">￥{{price}}</span>
        <!--商品数量-->
        <slot name="default"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //商品的ID
    id: {
      required: true,
      type: Number
    },
    //要渲染的商品的标题
    title: {
      default: '',
      type: String
    },
    //要渲染的商品的图片
    pic: {
      default: '',
      type: String
    },
    //商品的单价
    price: {
      default: '',
      type: Number
    },
    //商品的勾选状态
    state: {
      default: true,
      type: Boolean
    },
    //商品的购买数量
    count: {
      default: 1,
      type: Number
    }
  },
  methods: {
    //只要复选框选中状态发生了改变，就掉用这个函数
    stateChange(e) {
      const newState = e.target.checked
      this.$emit('state-change',{id:this.id,value:newState})
    }
  }
}
</script>

<style lang="less" scoped>
.goods-container {
  position: relative;
  .goods-container {
    border-top: 1px solid #efefef;
  }
  width: 100%;
  height: 20%;
  display: flex;
  .custom-control-input {
    position: relative;
    width: 30px;
    height: 20px;
    flex: 1;
    top: -50px;
    margin-left: 0;

  }
  .thumb {
    flex: 4;
  }
  .goods-info {
    position: relative;
    flex: 5;
    padding-right: 10px;

    .goods-info-bottom {
      width: 100%;
      position: absolute;
      height: 30px;
      line-height: 30px;
      bottom: 2px;
      color: red;
    }
    .goods-title {
      margin-top: 15px;
    }
  }
  .custom-control-label {
    height: 125px;
    flex: 6;
  }
}
/deep/ .number-container {
  float: left;
  margin-left: 45px;
  margin-top: 5px;
  text-align: center;
}
.goods-price {
  float: left;
  width: 70px;
}

</style>